<div [@routerTransition]>
    <div id="HostDashboard">
        <div class="m-subheader">
            <div class="row align-items-center">
                <div class="mr-auto col-auto">
                    <h3 class="m-subheader__title m-subheader__title--separator">
                        <span>{{"Dashboard" | localize}}</span>
                    </h3>
                    <span class="m-section__sub d-none d-sm-inline-block">
                        {{"HostDashboardHeaderInfo" | localize}}
                    </span>
                </div>
                <div class="col text-right mt-3 mt-md-0 mr-3">
                    <button name="RefreshButton" class="btn btn-primary" (click)="getDashboardStatisticsData(selectedDateRange)">
                        <i class="la la-refresh"></i>
                        <span class="d-none d-sm-inline-block">
                            {{"Refresh" | localize}}
                        </span>
                    </button>
                    <span #DashboardDateRangePicker class="m-subheader__daterange dashboard-report-range" (click)="dateRangePicker.toggle()">
                        <span class="m-subheader__daterange-label d-none d-md-inline-block">
                            <span class="m-subheader__daterange-title"></span>
                            <span class="m-subheader__daterange-date m--font-brand">
                                {{selectedDateRange[0] | momentFormat: 'LL'}} - {{selectedDateRange[1] | momentFormat: 'LL'}}
                            </span>
                        </span>
                        <a href="javascript:;" class="btn btn-primary m-btn m-btn--icon m-btn--icon-only">
                            <i class="la la-calendar" [attr.aria-label]="l('Expand')"></i>
                        </a>
                    </span>
                    <input type="text"
                           class="btn btn-primary date-range-filter"
                           #dateRangePicker="bsDaterangepicker"
                           readonly="readonly"
                           [(ngModel)]="selectedDateRange"
                           (bsValueChange)="getDashboardStatisticsData($event)"
                           placement="left"
                           style="visibility: hidden; margin-left: -220px"
                           bsDaterangepicker />
                </div>
            </div>
        </div>

        <div class="m-content">
            <div class="m-portlet">
                <div class="m-portlet__body  m-portlet__body--no-padding">
                    <div class="row m-row--no-padding m-row--col-separator-xl">
                        <div class="col-md-12 col-lg-6 col-xl-3">
                            <div class="m-widget24 new-subscription-statistics">
                                <div class="m-widget24__item">
                                    <h4 class="m-widget24__title">
                                        {{"NewSubscriptionAmount" | localize}}
                                    </h4>
                                    <br>
                                    <span class="m-widget24__desc">
                                        {{("Subscriptions")}}
                                    </span>
                                    <span class="m-widget24__stats m--font-brand">
                                        <span *ngIf="!hostDashboardData">...</span>
                                        <span *ngIf="hostDashboardData" counto [step]="30" [countTo]="hostDashboardData.newSubscriptionAmount" [countFrom]="0" [duration]="5" (countoChange)="countoNewSubscriptionAmount = $event">{{countoNewSubscriptionAmount | currency:'USD':'symbol':'1.0-0'}}</span>
                                    </span>
                                    <div class="m--space-10"></div>
                                    <div class="progress m-progress--sm">
                                        <div class="progress-bar m--bg-brand" role="progressbar" style="width: 100%;" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
                                    </div>
                                    <span class="m-widget24__change">
                                        <div class="status-title">
                                            {{selectedDateRange[0] | momentFormat: 'L'}} - {{selectedDateRange[1] | momentFormat: 'L'}}
                                        </div>
                                    </span>
                                    <span class="m-widget24__number">
                                    </span>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-12 col-lg-6 col-xl-3">
                            <div class="m-widget24 new-tenants-statistics">
                                <div class="m-widget24__item">
                                    <h4 class="m-widget24__title">
                                        {{"NewTenants" | localize}}
                                    </h4>
                                    <br>
                                    <span class="m-widget24__desc">
                                        {{"Tenants" | localize}}
                                    </span>
                                    <span class="m-widget24__stats m--font-info">
                                        <span *ngIf="!hostDashboardData">...</span>
                                        <span *ngIf="hostDashboardData" counto [step]="10" [countTo]="hostDashboardData.newTenantsCount" [countFrom]="0" [duration]="5" (countoChange)="countoNewTenantsCount = $event">{{countoNewTenantsCount | number:'1.0-0' }}</span>
                                    </span>
                                    <div class="m--space-10"></div>
                                    <div class="progress m-progress--sm">
                                        <div class="progress-bar m--bg-info" role="progressbar" style="width: 100%;" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
                                    </div>
                                    <span class="m-widget24__change">
                                        <div class="status-title">
                                            {{selectedDateRange[0] | momentFormat: 'L'}} - {{selectedDateRange[1] | momentFormat: 'L'}}
                                        </div>
                                    </span>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-12 col-lg-6 col-xl-3">
                            <div class="m-widget24 dashboard-statistics1">
                                <div class="m-widget24__item">
                                    <h4 class="m-widget24__title">
                                        {{"DashboardSampleStatistics" | localize}} 1
                                    </h4>
                                    <br>
                                    <span class="m-widget24__desc">
                                        {{"DashboardSampleStatistics" | localize}}
                                    </span>
                                    <span class="m-widget24__stats m--font-danger">
                                        <span *ngIf="!hostDashboardData">...</span>
                                        <span *ngIf="hostDashboardData" counto [step]="100" [countTo]="hostDashboardData.dashboardPlaceholder1" [countFrom]="0" [duration]="5" (countoChange)="countoDashboardPlaceholder1 = $event">{{countoDashboardPlaceholder1 | number:'1.0-0' }}</span>
                                    </span>
                                    <div class="m--space-10"></div>
                                    <div class="progress m-progress--sm">
                                        <div class="progress-bar m--bg-danger" role="progressbar" style="width: 45%;" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
                                    </div>
                                    <span class="m-widget24__change">
                                        {{"DashboardSampleStatisticsHelpText" | localize}}
                                    </span>
                                    <span class="m-widget24__number">
                                        <span class="counterup">45</span>%
                                    </span>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-12 col-lg-6 col-xl-3">
                            <div class="m-widget24 dashboard-statistics2">
                                <div class="m-widget24__item">
                                    <h4 class="m-widget24__title">
                                        {{"DashboardSampleStatistics" | localize}} 2
                                    </h4>
                                    <br>
                                    <span class="m-widget24__desc">
                                        {{"DashboardSampleStatistics" | localize}}
                                    </span>
                                    <span class="m-widget24__stats m--font-success">
                                        <span *ngIf="!hostDashboardData">...</span>
                                        <span *ngIf="hostDashboardData" counto [step]="100" [countTo]="hostDashboardData.dashboardPlaceholder2" [countFrom]="0" [duration]="5" (countoChange)="countoDashboardPlaceholder2 = $event">{{countoDashboardPlaceholder2 | number:'1.0-0' }}</span>
                                    </span>
                                    <div class="m--space-10"></div>
                                    <div class="progress m-progress--sm">
                                        <div class="progress-bar m--bg-success" role="progressbar" style="width: 65%;" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
                                    </div>
                                    <span class="m-widget24__change">
                                        {{"DashboardSampleStatisticsHelpText" | localize}}
                                    </span>
                                    <span class="m-widget24__number">
                                        <span class="counterup">65</span>%
                                    </span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-6 col-sm-12">
                    <div class="m-portlet m-portlet--full-height income-statistics" style="max-height: 383px; height: 383px;">
                        <div class="m-portlet__head">
                            <div class="m-portlet__head-caption">
                                <div class="m-portlet__head-title">
                                    <h3 class="m-portlet__head-text">
                                        <i class="la la-line-chart m--font-info"></i>
                                        <span class="caption-subject font-blue bold uppercase">{{"IncomeStatistics" | localize}}</span>
                                        <small class="d-none d-sm-inline-block">
                                            <span class="caption-helper">
                                                {{selectedDateRange[0] | momentFormat: 'L'}} - {{selectedDateRange[1] | momentFormat: 'L'}}
                                            </span>
                                        </small>
                                    </h3>
                                </div>
                            </div>
                            <div class="m-portlet__head-tools">
                                <div class="btn-group btn-group-devided" data-toggle="buttons">
                                    <label class="btn m-btn--pill btn-secondary" [ngClass]="{'active': selectedIncomeStatisticsDateInterval ==  appIncomeStatisticsDateInterval.Daily}" (click)="incomeStatisticsDateIntervalChange(appIncomeStatisticsDateInterval.Daily)">
                                        <input type="radio"
                                               name="IncomeStatisticsDatePeriod"
                                               class="toggle"
                                               [value]="appIncomeStatisticsDateInterval.Daily">
                                        {{"Daily" | localize}}
                                    </label>
                                    <label class="btn m-btn--pill btn-secondary" [ngClass]="{'active': selectedIncomeStatisticsDateInterval ==  appIncomeStatisticsDateInterval.Weekly}" (click)="incomeStatisticsDateIntervalChange(appIncomeStatisticsDateInterval.Weekly)">
                                        <input type="radio"
                                               name="IncomeStatisticsDatePeriod"
                                               class="toggle"
                                               [value]="appIncomeStatisticsDateInterval.Weekly">
                                        {{"Weekly" | localize}}
                                    </label>
                                    <label class="btn m-btn--pill btn-secondary" [ngClass]="{'active': selectedIncomeStatisticsDateInterval ==  appIncomeStatisticsDateInterval.Monthly}" (click)="incomeStatisticsDateIntervalChange(appIncomeStatisticsDateInterval.Monthly)">
                                        <input type="radio"
                                               name="IncomeStatisticsDatePeriod"
                                               class="toggle"
                                               [value]="appIncomeStatisticsDateInterval.Monthly">
                                        {{"Monthly" | localize}}
                                    </label>
                                </div>
                            </div>
                        </div>
                        <div class="m-portlet__body">
                            <ngx-charts-area-chart *ngIf="incomeStatisticsHasData" [busyIf]="loadingIncomeStatistics" [results]="incomeStatisticsData"
                                                   [showXAxisLabel]="true" showYAxisLabel="true" [xAxis]="true" [yAxis]="true" [showGridLines]="true">
                                <ng-template #tooltipTemplate let-model="model">
                                    <span>{{model.name}}</span>
                                    <br />
                                    <span>{{'IncomeWithAmount' | localize:model.value + ' ' + currency}}</span>
                                </ng-template>
                            </ngx-charts-area-chart>
                            <div class="note note-info text-center chart"
                                 [hidden]="incomeStatisticsHasData">
                                <small class="text-muted">{{"NoData" | localize}}</small>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-6 col-sm-12">
                    <div class="m-portlet m-portlet--full-height edition-statistics" style="max-height: 383px; height: 383px;">
                        <div class="m-portlet__head">
                            <div class="m-portlet__head-caption">
                                <div class="m-portlet__head-title">
                                    <h3 class="m-portlet__head-text">
                                        <i class="la la-pie-chart m--font-success"></i>
                                        <span class="caption-subject font-green-seagreen">{{"EditionStatistics" | localize}}</span>
                                        <small>
                                            <span class="caption-helper">
                                                {{selectedDateRange[0] | momentFormat: 'L'}} - {{selectedDateRange[1] | momentFormat: 'L'}}
                                            </span>
                                        </small>
                                    </h3>
                                </div>
                            </div>
                        </div>
                        <div class="m-portlet__body">
                            <ngx-charts-pie-chart *ngIf="editionStatisticsHasData" [results]="editionStatisticsData" [legend]="true" [doughnut]="true" [arcWidth]="0.75">
                            </ngx-charts-pie-chart>
                            <div class="note note-info text-center text-muted "
                                 [hidden]="editionStatisticsHasData">
                                <small class="text-muted">{{"NoData" | localize}}</small>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="col-lg-6 col-xs-12 col-sm-12">
                    <div class="m-portlet m-portlet--full-height expiring-tenants">
                        <div class="m-portlet__head">
                            <div class="m-portlet__head-caption">
                                <div class="m-portlet__head-title">
                                    <h3 class="m-portlet__head-text">
                                        <i class="icon-graduation font-red-pink"></i>
                                        <span class="caption-subject font-red-pink bold uppercase">{{"SubscriptionExpiringTenants" | localize}}</span><br />
                                        <small>
                                            <span class="caption-helper" *ngIf="hostDashboardData">
                                                {{"ExpiringTenantsHelpText" | localize:hostDashboardData.subscriptionEndAlertDayCount : hostDashboardData.maxExpiringTenantsShownCount}}
                                            </span>
                                        </small>
                                    </h3>
                                </div>
                            </div>
                        </div>
                        <div class="m-portlet__body">
                            <div class="scroller chart m-scrollable" data-always-visible="1" data-rail-visible="0" data-scrollable="true">
                                <div class="primeng-datatable-container expiring-tenants-table" [busyIf]="primengTableHelper.isLoading">
                                    <p-table #ExpiringTenantsTable
                                             [value]="expiringTenantsData"
                                             rows="{{primengTableHelper.defaultRecordsCountPerPage}}"
                                             [paginator]="false"
                                             [lazy]="false"
                                             [responsive]="primengTableHelper.isResponsive">
                                        <ng-template pTemplate="header">
                                            <tr>
                                                <th>{{'TenantName' | localize}}</th>
                                                <th>{{'RemainingDay' | localize}}</th>
                                            </tr>
                                        </ng-template>
                                        <ng-template pTemplate="body" let-record="$implicit">
                                            <tr>
                                                <td>
                                                    <span class="ui-column-title">{{'TenantName' | localize}}</span>
                                                    {{record.tenantName}}
                                                </td>
                                                <td>
                                                    <span class="ui-column-title">{{'RemainingDay' | localize}}</span>
                                                    {{record.remainingDayCount}}
                                                </td>
                                            </tr>
                                        </ng-template>
                                    </p-table>
                                    <div class="primeng-no-data" *ngIf="expiringTenantsData.length == 0">
                                        {{'NoData' | localize}}
                                    </div>
                                </div>
                            </div>
                            <div class="scroller-footer">
                                <div class="btn-arrow-link pull-right">
                                    <a href="javascript:;" class="see-all-expiring-tenants" (click)="gotoAllExpiringTenants()">{{"SeeAllRecords" | localize}}</a>
                                    <i class="icon-arrow-right"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-6 col-xs-12 col-sm-12">
                    <div class="m-portlet m-portlet--full-height recent-tenants">
                        <div class="m-portlet__head">
                            <div class="m-portlet__head-caption">
                                <div class="m-portlet__head-title">
                                    <h3 class="m-portlet__head-text">
                                        <i class="icon-user-follow font-purple-soft"></i>
                                        <span class="caption-subject font-purple-soft">{{"RecentTenants" | localize}}</span><br />
                                        <small>
                                            <span class="caption-helper" *ngIf="hostDashboardData">
                                                {{"RecentTenantsHelpText" | localize:hostDashboardData.recentTenantsDayCount : hostDashboardData.maxRecentTenantsShownCount}}
                                            </span>
                                        </small>
                                    </h3>
                                </div>
                            </div>
                        </div>
                        <div class="m-portlet__body">
                            <div class="scroller chart m-scrollable" data-always-visible="1" data-rail-visible="0" data-scrollable="true">
                                <div class="primeng-datatable-container recent-tenants-table" [busyIf]="primengTableHelper.isLoading">
                                    <p-table #RecentTenantsTable
                                             [value]="recentTenantsData"
                                             rows="{{primengTableHelper.defaultRecordsCountPerPage}}"
                                             [paginator]="false"
                                             [lazy]="false"
                                             [responsive]="primengTableHelper.isResponsive">
                                        <ng-template pTemplate="header">
                                            <tr>
                                                <th>{{'TenantName' | localize}}</th>
                                                <th>{{'CreationTime' | localize}}</th>
                                            </tr>
                                        </ng-template>
                                        <ng-template pTemplate="body" let-record="$implicit">
                                            <tr>
                                                <td>
                                                    <span class="ui-column-title">{{'TenantName' | localize}}</span>
                                                    {{record.name}}
                                                </td>
                                                <td>
                                                    <span class="ui-column-title">{{'CreationTime' | localize}}</span>
                                                    {{ record.creationTime | momentFormat:'L LT'}}
                                                </td>
                                            </tr>
                                        </ng-template>
                                    </p-table>
                                    <div class="primeng-no-data" *ngIf="recentTenantsData.length == 0">
                                        {{'NoData' | localize}}
                                    </div>
                                </div>
                            </div>
                            <div class="scroller-footer">
                                <div class="btn-arrow-link pull-right">
                                    <a href="javascript:;" class="see-all-recent-tenants" (click)="gotoAllRecentTenants()">{{"SeeAllRecords" | localize}}</a>
                                    <i class="icon-arrow-right"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
